<template>
  <div class="ticket-item">
    <div class="top-name">
      {{ item.name }} <br />
      {{ item.enName }}
    </div>
    <div class="bottom-info">
      <div class="te">{{ item.address }} {{ item.enAddress }}</div>
      <div class="te">{{ formatDay }} {{ formatWeek }}</div>
      <div class="te">{{ item.ticketName }} {{ item.ticketEnName }}</div>
      <div class="te">x{{ item.quantity }}</div>
    </div>
    <div class="ticket-code">
      <img :src="temPath" alt="" />
    </div>
    <div class="canvas-box">
      <uQrcode ref="uqrcode" :start="false" :auto="false" canvas-id="qrcode" :value="codeValue" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, computed, defineProps } from 'vue'
import { ossDomain } from '@/utils/oss'
import { getWeekDay } from '@/utils/current'
import { encryptDes } from '@/utils/encryption'
import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
let codeValue = ref<string>('')
let temPath = ref<string>('')
let uqrcode = ref()
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  }
})

const formatDay = computed(() => {
  let time = props.item.agreementTime.substring(0, 11)

  return time ? time.split('-').reverse().join('.') : ''
})
const formatWeek = computed(() => {
  let time = props.item.agreementTime
  let { cn, en } = time ? getWeekDay(time) : { cn: '', en: '' }
  return `${cn} ${en}`
})
// import { encrypt } from '@/utils/encryption'

// const qrcodeValue = computed(() => {
//   const id = props.item.id
//   return encrypt(`ticket^${id}`)
// })
//  // 状态 1.待领取 2.待使用 3.已核销 4.已过期 5.已退票
const statusCn = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '待领取  UnCollect',
    2: '待使用  New',
    3: '已核销  Used',
    4: '已过期  Expired',
    5: '已退票  Refund'
  }
  return statusMap[status] || '未知状态'
}
onMounted(() => {
  codeValue.value = encryptDes(`ticket^${props.item.id}`)
  uqrcode.value.make()
})
</script>

<style lang="scss">
@import './ticket-item.scss';
</style>
